<!-- 首页 -->
<template>
	<view class="home-wrap u-m-b-20">
		<!-- 空白页 -->
		<u-no-network @retry="init"></u-no-network>
		<shopro-empty v-if="!hasTemplate" :image="$IMG_URL + '/imgs/empty/template_empty.png'" tipText="暂未找到模板，请前往装修~"></shopro-empty>

		<view v-else-if="isConnected && isRefresh" class="content-box">
			<!-- 导航栏 -->
			<home-head v-if="headSwiperList && headSwiperList.length" :isScorll="isScorll" borderRadius="0" :navTitle="appName" :list="headSwiperList"></home-head>

			<!-- 自定义模块 -->
			<view class="template-box">
				<block v-for="(item, index) in homeTemplate" :key="item.id">
					<!-- 轮播 -->
					<sh-banner
						v-if="item.type === 'banner' && index !== 0"
						:Px="item.content.x"
						:Py="item.content.y"
						:borderRadius="item.content.radius"
						:height="item.content.height"
						:list="item.content.list"
					></sh-banner>

					<!-- 搜索 -->
					<sh-search v-if="item.type === 'search'"></sh-search>

					<!-- 滑动宫格 -->
					<sh-grid-swiper v-if="item.type === 'menu'" :list="item.content.list" :oneRowNum="item.content.style"></sh-grid-swiper>

					<!-- 推荐商品 -->
					<sh-hot-goods v-if="item.type === 'goods-list' || item.type === 'goods-group'" :detail="item.content"></sh-hot-goods>
					<!-- 广告魔方 -->
					<sh-adv v-if="item.type === 'adv'" :detail="item.content"></sh-adv>
					<!-- 优惠券 -->
					<sh-coupon v-if="item.type === 'coupons'" :detail="item.content"></sh-coupon>
					<!-- 秒杀-->
					<sh-seckill v-if="item.type === 'seckill'" :detail="item.content"></sh-seckill>
					<!-- 拼团 -->
					<sh-groupon v-if="item.type === 'groupon'" :detail="item.content"></sh-groupon>
					<!-- 富文本 -->
					<sh-richtext v-if="item.type === 'rich-text'" :richId="item.content.id"></sh-richtext>
					<!-- 功能列表 -->
					<sh-cell v-if="item.type === 'nav-list'" :list="item.content.list"></sh-cell>
					<!-- 九宫格列表 -->
					<sh-grid v-if="item.type === 'grid-list'" :detail="item.content.list"></sh-grid>
					<!-- 功能标题 -->
					<sh-title-card v-if="item.type === 'title-block'" :title="item.content.name" :bgImage="item.content.image" :titleColor="item.content.color"></sh-title-card>
					<!-- 钱包 -->
					<sh-wallet v-if="item.type === 'wallet-card'"></sh-wallet>
					<!-- 订单卡片 -->
					<sh-order-card v-if="item.type === 'order-card'"></sh-order-card>
					
					<!-- 直播 -->
					<!-- #ifdef MP-WEIXIN -->
					<sh-live v-if="item.type === 'live' && HAS_LIVE" :detail="item.content"></sh-live>
					<!-- #endif -->
				</block>
				
					<!-- 老师推荐 -->
				
					<view class=" u-relative padding">
						<view class="flex justify-between" @click="ccc">
							<text class="f30 text-bold">老师推荐</text>
							<view class="flex align-center text-gray" >
								<text class="f28">更多</text>
								<p class="cuIcon-right"></p>
							</view>
						</view>
				
						<view
							class=" w420 h110 bg-img bgimg"
							style="background-image: url(https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/20210825160017.png);"
						></view>
						<view class="padding-tb flex" v-for="(i, index) in teacherdata" :key="index" @click="teacherDetails(i.id)">
							<image
								:src="img + i.avatar"
								mode="aspectFill"
								@load="showimage = true"
								lazy-load
								class="  w164 h164 r10 bg-gray mr25"
							></image>
							<view class="flex flex-direction justify-around " style="width: 500rpx;">
								<text class="f30 text-bold">{{ i.name }}</text>
								<text class="f24 txtClr hidden ">{{ i.brief }}</text>
								<text class="f24 txtClr hidden">{{ i.service_content }}</text>
							</view>
						</view>
					</view>
					<view class="horzLine"></view>
					<!-- 热门活动 -->
					<view class="" style="padding: 30rpx;">
						<view class="flex justify-between padding-bottom" @click="jump('/pages/start/activity')">
							<text class="f30 text-bold">热门活动</text>
							<view class="flex align-center text-gray" >
								<text class="f28">更多</text>
								<p class="cuIcon-right"></p>
							</view>
						</view>
				
						<view
							class="padding-bottom flex flex-direction"
							v-for="(item, index) in activitydata"
							:key="index"
							
							@click="jumpp(item)"
						>
							<image
								:src="img + item.image"
								mode="aspectFill"
								@load="showimage1 = true"
								lazy-load
								class="  w690 h360 r10 bg-gray "
							></image>
							<view class="flex align-center justify-between mt25">
								<text class="f28 text-bold ">{{ item.title }}</text>
								<view class="sgnUp">{{signingUp(item.start_time ,item.end_time)}}</view>
							</view>
							<view class="flex align-center ">
								<text class="f24 " style="color: #666666;">
									活动时间: {{ item.start_time_text }} 至 {{ item.end_time_text }}
								</text>
							</view>
						</view>
					</view>
				
				<!-- <sh-zujian ref='zujian' ></sh-zujian> -->
			</view>
			<!-- 分类选项卡 -->
			<sh-category-tabs
				v-if="categoryTabsData && categoryTabsData.category_arr && categoryTabsData.category_arr.length"
				:enable="enable"
				:styleType="categoryTabsData.style"
				:tabsList="categoryTabsData.category_arr"
			></sh-category-tabs>
			<!-- 登录提示 -->
			<shopro-auth-modal></shopro-auth-modal>
			<!-- 悬浮按钮 -->
			<shopro-float-btn></shopro-float-btn>
			<!-- 连续弹窗提醒 -->
			<shopro-notice-modal v-if="!showPrivacy && isLogin"></shopro-notice-modal>
			<!-- 隐私协议 -->
			<!-- #ifdef APP-PLUS -->
			<privacy-modal v-if="shopInfo && shopInfo.name" v-model="showPrivacy"></privacy-modal>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<view class="tabbar-hack" style="height: 120rpx; width:100%;"></view>
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
	// 主页组件
import shZujian from './components/sh-zujian.vue';
import shBanner from './components/sh-banner.vue';
import shGridSwiper from './components/sh-grid-swiper.vue';
import shHotGoods from './components/sh-hot-goods.vue';
import shAdv from './components/sh-adv.vue';
import shCoupon from './components/sh-coupon.vue';
import shSeckill from './components/sh-seckill.vue';
import shGroupon from './components/sh-groupon.vue';
import shRichtext from './components/sh-richtext.vue';
import shCell from './components/sh-cell.vue';
import shGrid from './components/sh-grid.vue';
import shTitleCard from './components/sh-title-card.vue';
import shOrderCard from './components/sh-order-card.vue';
import shWallet from './components/sh-wallet.vue';
import shSearch from './components/sh-search.vue';
import shCategoryTabs from './components/sh-category-tabs.vue';
import { mapMutations, mapActions, mapState } from 'vuex';

import privacyModal from './index/privacy-modal.vue';
import homeHead from './index/home-head.vue';

// #ifdef MP-WEIXIN
import { HAS_LIVE } from '@/env';
import shLive from './components/sh-live.vue';
// #endif

// #ifdef H5
let listenMove = document.body; //禁止手机h5下拉刷新带动整个页面。
let handle = function(e) {
	e.preventDefault();
};
// #endif

export default {
	components: {
		shZujian,
		shBanner,
		shGridSwiper,
		shGroupon,
		shHotGoods,
		shAdv,
		shCoupon,
		shSeckill,
		shRichtext,
		shCell,
		shGrid,
		shTitleCard,
		shWallet,
		shOrderCard,
		shSearch,
		shCategoryTabs,

		privacyModal,
		homeHead,

		// #ifdef MP-WEIXIN
		shLive
		// #endif
	},
	data() {
		return {
			
				showimage: false,
				showimage1: false,
				teacherdata: [],
				activitydata: [],
				img: 'https://guoxue.qianjiwl.xyz',
			
			// #ifdef MP-WEIXIN
			HAS_LIVE: HAS_LIVE,
			// #endif
			isRefresh: true,
			enable: false, //是否开启吸顶。
			isConnected: true, //是否有网
			showPrivacy: false, //协议
			isScorll: false
		};
	},
	computed: {
		...mapState({
			config: ({ shopro }) => shopro.config,
			shopInfo: ({ shopro }) => shopro.config?.shop,
			isLogin: ({ user }) => user.isLogin,
			homeTemplate: ({ shopro }) => shopro.template?.home,
			hasTemplate: ({ shopro }) => shopro.hasTemplate
		}),
		// 项目标题
		appName() {
			if (this.config?.shop) {
				return this.config?.shop?.name;
			}
		},
		// 头部模块数据
		headSwiperList() {
			if (this.homeTemplate?.length) {
				return this.homeTemplate[0]?.content?.list;
			}
		},
		//分类选项卡数据
		categoryTabsData() {
			if (this.homeTemplate?.length) {
				return this.homeTemplate[this.homeTemplate.length - 1]?.content;
			}
		}
	},
	onPullDownRefresh() {
		this.init();
	},
	onPageScroll(e) {
		this.isScorll = e.scrollTop > 100 ? true : false;
	},
	onShow() {
		let that = this;
		this.enable = true;
		this.isLogin && this.getCartList();
		// #ifdef APP-VUE
		// 网络变化检测
		uni.onNetworkStatusChange(res => {
			this.isConnected = res.isConnected;
		});
		uni.getNetworkType({
			success: res => {
				res.networkType == 'none' ? (this.isConnected = false) : (this.isConnected = true);
			}
		});
		// #endif
	},
	onHide() {
		this.enable = false;
	},
	onLoad() {
		this.teacher()
		this.activity()
		// /activity
		// #ifdef APP-VUE
		// app隐私协议弹窗
		if (!plus.runtime.isAgreePrivacy()) {
			this.showPrivacy = true;
			this.showNoticeModal = false;
		}
		// #endif
	},
	methods: {
		ccc(){
			
			this.jump('/pages/start/teacherRecommendation')
		},
		jump(path, query) {
			console.log('path, :>> ', path);
			console.log('query :>> ', query);
			this.$Router.push({
				path: path,
				query: query
			});
		},
		...mapActions(['appInit', 'getTemplate', 'getCartList']),
		jweixin() {
			this.$wxsdk.openLocation();
		},
		async teacher() {
			console.log('1111 :>> ', 1111);
			let that = this;
			const res = await that.$http('common.eventsLst', { page: 1 });
			this.teacherdata = res.data.data.slice(0,4);
		},
		async teacherDetails(e) {
			console.log('e :>> ', e);
			// pages/start/expert
			// uni.navigateTo({
			// 	url: 'pages/start/expert?id='+e,
			// });
			 this.jump('/pages/start/expert',{id:e})
		},
		async jumpp(e){
			uni.setStorageSync('content' ,e)
			// uni.navigateTo({
			//  	url: '/pages/start/evntDetails',
			//  });
			 this.jump('/pages/start/evntDetails')
		},
		 signingUp(e,e1){
			 console.log('e :>> ', e);
			 console.log('e1 :>> ', e1);
			 console.log('Math.round(new Date() / 1000) :>> ', Math.round(new Date() / 1000));
			 var time = Math.round(new Date() / 1000)
			 if (e < time &&  time <  e1 ) {
			 	return '活动中'
			 }
			 if (time < e  ) {
			 	return '报名中'
			 }
			 if (time > e1  ) {
			 	return '已结束'
			 }
		},
		async activity() {
			let that = this;
			const res = await that.$http('common.activity', { page: 1, limit: 10 });
			
			this.activitydata = res.data.slice(0,3);
			console.log('res11 :>> ', res);
			
		},
		// 初始化
		// teacher() {
		// 	this.$refs.zujian.teacher()
		// 	this.$refs.zujian.activity()
		// 	// activity
			
			
		// },
		init() {
			this.isRefresh = false;
			return Promise.all([this.getTemplate()]).then(() => {
				uni.stopPullDownRefresh();
				this.isRefresh = true;
			});
		}
	}
};
</script>

<style lang="scss">
	.txtClr {
		color: #4d4d4d;
	}
	.horzLine {
		width: 750rpx;
		height: 20rpx;
		background: #f0f0f0;
	}
	.sgnUp {
		padding: 13rpx 19rpx;
		border: 2rpx solid #d76363;
		border-radius: 4rpx;
		font-size: 26rpx;
		font-weight: 500;
		color: #d76363;
	}
	.bgimg {
		position: absolute;
		top: 50rpx;
		right: 0;
	}
</style>
